<template>
	<view class="info">
		<uv-navbar title="编辑信息" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />

		<view class="content">
			<uv-cell-group :border="false">
				<uv-cell title="修改头像" isLink @click="updateAvatar">
					<template #value>
						<uv-avatar :src="model.avatar" />
					</template>
				</uv-cell>
				<uv-cell title="昵称" :border="false" isLink>
					<template #value>
						<uv-input v-model="model.nickname" border="none" inputAlign="right"  @blur="handleBlur" />
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>

		<tui-modal :show="modalVisible" custom>
			<view class="tui-modal-custom">
				<view class="img-box">
					<lst-upimg :type="1"  @success="e => upimgSuccess(e, '头像')" :list="[model.avatar]"
					name="头像">
					<uv-image :src="model.avatar || ''" height="100" mode="aspectFit" />

				</lst-upimg>
				</view>
				
				<view class="bt-box">
				<tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="handleClick">确定</tui-button>
				<view class="bt-fx"></view>
				<tui-button height="72rpx" :size="28" type="gray" shape="circle" @click="hideModal">取消</tui-button>
				</view>
			</view>
		</tui-modal>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import { setUserInfo } from '@/api'
	import { useUserStore } from '@/store'
	
	
	const userStore = useUserStore()

	const avatar = ref('')
	const modalVisible = ref(false)
    const model = reactive({
	  avatar: userStore.userInfo.avatar,
	  nickname: userStore.userInfo.nickname
	})
	
	
	const upimgSuccess = (fileList, type) => {
		avatar.value = fileList[0].src
	}
	const updateAvatar = () => {
		modalVisible.value = true;
	}
	const hideModal = () => {
		modalVisible.value = false;
	}
	const handleBlur =(val)=>{
		updateUserInfo({nickname: model.nickname})
	}
	const updateUserInfo=(data)=>{
		try {
		  const { result } = setUserInfo(data)
		  userStore.updateUserInfo(model)
		  uni.$uv.toast('更新成功')
		} catch (error) {
		  console.error('更新失败:', error)
		  uni.$uv.toast('更新失败')
		}
		
	}
	const handleClick = () => {
		model.avatar=avatar.value
		updateUserInfo({avatar: model.avatar})
		hideModal();
	}
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
	.info {
		:deep(.uv-status-bar) {
			background-image: none !important;
			background-color: #EAA8AD !important;
		}

		.content {
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
		}
	}


	.upload-container {
		padding: 20rpx;
	}

	.preview-image {
		width: 100%;
		height: 200rpx;
		margin-top: 15rpx;
		border: 1rpx dashed #eee;
	}
	
	.img-box{
		padding-bottom: 40rpx;
	}
	.bt-box{
		width: 100%;
		display: flex;
	}
	.bt-fx{
		width:30rpx;
	}
	
	:deep(.uv-upload__wrap){
		justify-content: center;
		
	}
</style>